<template>
    <div class="container">
        <div class="digit _1"></div>
        <div class="digit _5"></div>
        <div class="digit _3"></div>
        <div class="digit _6"></div>
        <div class="digit _3"></div>
        <div class="digit _0"></div>
        <div class="surface">
            <div class="block b1">
                <div class="block-outer">
                    <div class="block-inner">
                        <div class="bottom"></div>
                        <div class="front"></div>
                        <div class="left"></div>
                        <div class="right"></div>
                    </div>
                </div>
            </div>
            <div class="block b2">
                <div class="block-outer">
                    <div class="block-inner">
                        <div class="bottom"></div>
                        <div class="front"></div>
                        <div class="left"></div>
                        <div class="right"></div>
                    </div>
                </div>
            </div>
            <div class="block b3">
                <div class="block-outer">
                    <div class="block-inner">
                        <div class="bottom"></div>
                        <div class="front"></div>
                        <div class="left"></div>
                        <div class="right"></div>
                    </div>
                </div>
            </div>
            <div class="block b4">
                <div class="block-outer">
                    <div class="block-inner">
                        <div class="bottom"></div>
                        <div class="front"></div>
                        <div class="left"></div>
                        <div class="right"></div>
                    </div>
                </div>
            </div>
            <div class="block b5">
                <div class="block-outer">
                    <div class="block-inner">
                        <div class="bottom"></div>
                        <div class="front"></div>
                        <div class="left"></div>
                        <div class="right"></div>
                    </div>
                </div>
            </div>
            <div class="block b6">
                <div class="block-outer">
                    <div class="block-inner">
                        <div class="bottom"></div>
                        <div class="front"></div>
                        <div class="left"></div>
                        <div class="right"></div>
                    </div>
                </div>
            </div>
            <div class="block b7">
                <div class="block-outer">
                    <div class="block-inner">
                        <div class="bottom"></div>
                        <div class="front"></div>
                        <div class="left"></div>
                        <div class="right"></div>
                    </div>
                </div>
            </div>
            <div class="block b8">
                <div class="block-outer">
                    <div class="block-inner">
                        <div class="bottom"></div>
                        <div class="front"></div>
                        <div class="left"></div>
                        <div class="right"></div>
                    </div>
                </div>
            </div>
            <div class="block b9">
                <div class="block-outer">
                    <div class="block-inner">
                        <div class="bottom"></div>
                        <div class="front"></div>
                        <div class="left"></div>
                        <div class="right"></div>
                    </div>
                </div>
            </div>
            <div class="block b10">
                <div class="block-outer">
                    <div class="block-inner">
                        <div class="bottom"></div>
                        <div class="front"></div>
                        <div class="left"></div>
                        <div class="right"></div>
                    </div>
                </div>
            </div>
            <div class="block b11">
                <div class="block-outer">
                    <div class="block-inner">
                        <div class="bottom"></div>
                        <div class="front"></div>
                        <div class="left"></div>
                        <div class="right"></div>
                    </div>
                </div>
            </div>
            <div class="block b12">
                <div class="block-outer">
                    <div class="block-inner">
                        <div class="bottom"></div>
                        <div class="front"></div>
                        <div class="left"></div>
                        <div class="right"></div>
                    </div>
                </div>
            </div>
            <div class="block b13">
                <div class="block-outer">
                    <div class="block-inner">
                        <div class="bottom"></div>
                        <div class="front"></div>
                        <div class="left"></div>
                        <div class="right"></div>
                    </div>
                </div>
            </div>
            <div class="block b14">
                <div class="block-outer">
                    <div class="block-inner">
                        <div class="bottom"></div>
                        <div class="front"></div>
                        <div class="left"></div>
                        <div class="right"></div>
                    </div>
                </div>
            </div>
            <div class="block b15">
                <div class="block-outer">
                    <div class="block-inner">
                        <div class="bottom"></div>
                        <div class="front"></div>
                        <div class="left"></div>
                        <div class="right"></div>
                    </div>
                </div>
            </div>
            <div class="block b16">
                <div class="block-outer">
                    <div class="block-inner">
                        <div class="bottom"></div>
                        <div class="front"></div>
                        <div class="left"></div>
                        <div class="right"></div>
                    </div>
                </div>
            </div>
            <div class="block b17">
                <div class="block-outer">
                    <div class="block-inner">
                        <div class="bottom"></div>
                        <div class="front"></div>
                        <div class="left"></div>
                        <div class="right"></div>
                    </div>
                </div>
            </div>
            <div class="block b18">
                <div class="block-outer">
                    <div class="block-inner">
                        <div class="bottom"></div>
                        <div class="front"></div>
                        <div class="left"></div>
                        <div class="right"></div>
                    </div>
                </div>
            </div>
            <div class="block b19">
                <div class="block-outer">
                    <div class="block-inner">
                        <div class="bottom"></div>
                        <div class="front"></div>
                        <div class="left"></div>
                        <div class="right"></div>
                    </div>
                </div>
            </div>
            <div class="block b20">
                <div class="block-outer">
                    <div class="block-inner">
                        <div class="bottom"></div>
                        <div class="front"></div>
                        <div class="left"></div>
                        <div class="right"></div>
                    </div>
                </div>
            </div>
            <div class="block b21">
                <div class="block-outer">
                    <div class="block-inner">
                        <div class="bottom"></div>
                        <div class="front"></div>
                        <div class="left"></div>
                        <div class="right"></div>
                    </div>
                </div>
            </div>
            <div class="block b22">
                <div class="block-outer">
                    <div class="block-inner">
                        <div class="bottom"></div>
                        <div class="front"></div>
                        <div class="left"></div>
                        <div class="right"></div>
                    </div>
                </div>
            </div>
            <div class="block b23">
                <div class="block-outer">
                    <div class="block-inner">
                        <div class="bottom"></div>
                        <div class="front"></div>
                        <div class="left"></div>
                        <div class="right"></div>
                    </div>
                </div>
            </div>
            <div class="block b24">
                <div class="block-outer">
                    <div class="block-inner">
                        <div class="bottom"></div>
                        <div class="front"></div>
                        <div class="left"></div>
                        <div class="right"></div>
                    </div>
                </div>
            </div>
            <div class="block b25">
                <div class="block-outer">
                    <div class="block-inner">
                        <div class="bottom"></div>
                        <div class="front"></div>
                        <div class="left"></div>
                        <div class="right"></div>
                    </div>
                </div>
            </div>
            <div class="block b26">
                <div class="block-outer">
                    <div class="block-inner">
                        <div class="bottom"></div>
                        <div class="front"></div>
                        <div class="left"></div>
                        <div class="right"></div>
                    </div>
                </div>
            </div>
            <div class="block b27">
                <div class="block-outer">
                    <div class="block-inner">
                        <div class="bottom"></div>
                        <div class="front"></div>
                        <div class="left"></div>
                        <div class="right"></div>
                    </div>
                </div>
            </div>
            <div class="block b28">
                <div class="block-outer">
                    <div class="block-inner">
                        <div class="bottom"></div>
                        <div class="front"></div>
                        <div class="left"></div>
                        <div class="right"></div>
                    </div>
                </div>
            </div>
            <div class="block b29">
                <div class="block-outer">
                    <div class="block-inner">
                        <div class="bottom"></div>
                        <div class="front"></div>
                        <div class="left"></div>
                        <div class="right"></div>
                    </div>
                </div>
            </div>
            <div class="block b30">
                <div class="block-outer">
                    <div class="block-inner">
                        <div class="bottom"></div>
                        <div class="front"></div>
                        <div class="left"></div>
                        <div class="right"></div>
                    </div>
                </div>
            </div>
            <div class="block b31">
                <div class="block-outer">
                    <div class="block-inner">
                        <div class="bottom"></div>
                        <div class="front"></div>
                        <div class="left"></div>
                        <div class="right"></div>
                    </div>
                </div>
            </div>
            <div class="block b32">
                <div class="block-outer">
                    <div class="block-inner">
                        <div class="bottom"></div>
                        <div class="front"></div>
                        <div class="left"></div>
                        <div class="right"></div>
                    </div>
                </div>
            </div>
            <div class="block b33">
                <div class="block-outer">
                    <div class="block-inner">
                        <div class="bottom"></div>
                        <div class="front"></div>
                        <div class="left"></div>
                        <div class="right"></div>
                    </div>
                </div>
            </div>
            <div class="block b34">
                <div class="block-outer">
                    <div class="block-inner">
                        <div class="bottom"></div>
                        <div class="front"></div>
                        <div class="left"></div>
                        <div class="right"></div>
                    </div>
                </div>
            </div>
            <div class="block b35">
                <div class="block-outer">
                    <div class="block-inner">
                        <div class="bottom"></div>
                        <div class="front"></div>
                        <div class="left"></div>
                        <div class="right"></div>
                    </div>
                </div>
            </div>
            <div class="block b36">
                <div class="block-outer">
                    <div class="block-inner">
                        <div class="bottom"></div>
                        <div class="front"></div>
                        <div class="left"></div>
                        <div class="right"></div>
                    </div>
                </div>
            </div>
            <div class="block b37">
                <div class="block-outer">
                    <div class="block-inner">
                        <div class="bottom"></div>
                        <div class="front"></div>
                        <div class="left"></div>
                        <div class="right"></div>
                    </div>
                </div>
            </div>
            <div class="block b38">
                <div class="block-outer">
                    <div class="block-inner">
                        <div class="bottom"></div>
                        <div class="front"></div>
                        <div class="left"></div>
                        <div class="right"></div>
                    </div>
                </div>
            </div>
            <div class="block b39">
                <div class="block-outer">
                    <div class="block-inner">
                        <div class="bottom"></div>
                        <div class="front"></div>
                        <div class="left"></div>
                        <div class="right"></div>
                    </div>
                </div>
            </div>
            <div class="block b40">
                <div class="block-outer">
                    <div class="block-inner">
                        <div class="bottom"></div>
                        <div class="front"></div>
                        <div class="left"></div>
                        <div class="right"></div>
                    </div>
                </div>
            </div>
            <div class="block b41">
                <div class="block-outer">
                    <div class="block-inner">
                        <div class="bottom"></div>
                        <div class="front"></div>
                        <div class="left"></div>
                        <div class="right"></div>
                    </div>
                </div>
            </div>
            <div class="block b42">
                <div class="block-outer">
                    <div class="block-inner">
                        <div class="bottom"></div>
                        <div class="front"></div>
                        <div class="left"></div>
                        <div class="right"></div>
                    </div>
                </div>
            </div>
            <div class="block b43">
                <div class="block-outer">
                    <div class="block-inner">
                        <div class="bottom"></div>
                        <div class="front"></div>
                        <div class="left"></div>
                        <div class="right"></div>
                    </div>
                </div>
            </div>
            <div class="block b44">
                <div class="block-outer">
                    <div class="block-inner">
                        <div class="bottom"></div>
                        <div class="front"></div>
                        <div class="left"></div>
                        <div class="right"></div>
                    </div>
                </div>
            </div>
            <div class="block b45">
                <div class="block-outer">
                    <div class="block-inner">
                        <div class="bottom"></div>
                        <div class="front"></div>
                        <div class="left"></div>
                        <div class="right"></div>
                    </div>
                </div>
            </div>
            <div class="block b46">
                <div class="block-outer">
                    <div class="block-inner">
                        <div class="bottom"></div>
                        <div class="front"></div>
                        <div class="left"></div>
                        <div class="right"></div>
                    </div>
                </div>
            </div>
            <div class="block b47">
                <div class="block-outer">
                    <div class="block-inner">
                        <div class="bottom"></div>
                        <div class="front"></div>
                        <div class="left"></div>
                        <div class="right"></div>
                    </div>
                </div>
            </div>
            <div class="block b48">
                <div class="block-outer">
                    <div class="block-inner">
                        <div class="bottom"></div>
                        <div class="front"></div>
                        <div class="left"></div>
                        <div class="right"></div>
                    </div>
                </div>
            </div>
            <div class="block b49">
                <div class="block-outer">
                    <div class="block-inner">
                        <div class="bottom"></div>
                        <div class="front"></div>
                        <div class="left"></div>
                        <div class="right"></div>
                    </div>
                </div>
            </div>
            <div class="block b50">
                <div class="block-outer">
                    <div class="block-inner">
                        <div class="bottom"></div>
                        <div class="front"></div>
                        <div class="left"></div>
                        <div class="right"></div>
                    </div>
                </div>
            </div>
            <div class="block b51">
                <div class="block-outer">
                    <div class="block-inner">
                        <div class="bottom"></div>
                        <div class="front"></div>
                        <div class="left"></div>
                        <div class="right"></div>
                    </div>
                </div>
            </div>
            <div class="block b52">
                <div class="block-outer">
                    <div class="block-inner">
                        <div class="bottom"></div>
                        <div class="front"></div>
                        <div class="left"></div>
                        <div class="right"></div>
                    </div>
                </div>
            </div>
            <div class="block b53">
                <div class="block-outer">
                    <div class="block-inner">
                        <div class="bottom"></div>
                        <div class="front"></div>
                        <div class="left"></div>
                        <div class="right"></div>
                    </div>
                </div>
            </div>
            <div class="block b54">
                <div class="block-outer">
                    <div class="block-inner">
                        <div class="bottom"></div>
                        <div class="front"></div>
                        <div class="left"></div>
                        <div class="right"></div>
                    </div>
                </div>
            </div>
            <div class="block b55">
                <div class="block-outer">
                    <div class="block-inner">
                        <div class="bottom"></div>
                        <div class="front"></div>
                        <div class="left"></div>
                        <div class="right"></div>
                    </div>
                </div>
            </div>
            <div class="block b56">
                <div class="block-outer">
                    <div class="block-inner">
                        <div class="bottom"></div>
                        <div class="front"></div>
                        <div class="left"></div>
                        <div class="right"></div>
                    </div>
                </div>
            </div>
            <div class="block b57">
                <div class="block-outer">
                    <div class="block-inner">
                        <div class="bottom"></div>
                        <div class="front"></div>
                        <div class="left"></div>
                        <div class="right"></div>
                    </div>
                </div>
            </div>
            <div class="block b58">
                <div class="block-outer">
                    <div class="block-inner">
                        <div class="bottom"></div>
                        <div class="front"></div>
                        <div class="left"></div>
                        <div class="right"></div>
                    </div>
                </div>
            </div>
            <div class="block b59">
                <div class="block-outer">
                    <div class="block-inner">
                        <div class="bottom"></div>
                        <div class="front"></div>
                        <div class="left"></div>
                        <div class="right"></div>
                    </div>
                </div>
            </div>
            <div class="block b60">
                <div class="block-outer">
                    <div class="block-inner">
                        <div class="bottom"></div>
                        <div class="front"></div>
                        <div class="left"></div>
                        <div class="right"></div>
                    </div>
                </div>
            </div>
            <div class="block b61">
                <div class="block-outer">
                    <div class="block-inner">
                        <div class="bottom"></div>
                        <div class="front"></div>
                        <div class="left"></div>
                        <div class="right"></div>
                    </div>
                </div>
            </div>
            <div class="block b62">
                <div class="block-outer">
                    <div class="block-inner">
                        <div class="bottom"></div>
                        <div class="front"></div>
                        <div class="left"></div>
                        <div class="right"></div>
                    </div>
                </div>
            </div>
            <div class="block b63">
                <div class="block-outer">
                    <div class="block-inner">
                        <div class="bottom"></div>
                        <div class="front"></div>
                        <div class="left"></div>
                        <div class="right"></div>
                    </div>
                </div>
            </div>
            <div class="block b64">
                <div class="block-outer">
                    <div class="block-inner">
                        <div class="bottom"></div>
                        <div class="front"></div>
                        <div class="left"></div>
                        <div class="right"></div>
                    </div>
                </div>
            </div>
            <div class="block b65">
                <div class="block-outer">
                    <div class="block-inner">
                        <div class="bottom"></div>
                        <div class="front"></div>
                        <div class="left"></div>
                        <div class="right"></div>
                    </div>
                </div>
            </div>
            <div class="block b66">
                <div class="block-outer">
                    <div class="block-inner">
                        <div class="bottom"></div>
                        <div class="front"></div>
                        <div class="left"></div>
                        <div class="right"></div>
                    </div>
                </div>
            </div>
            <div class="block b67">
                <div class="block-outer">
                    <div class="block-inner">
                        <div class="bottom"></div>
                        <div class="front"></div>
                        <div class="left"></div>
                        <div class="right"></div>
                    </div>
                </div>
            </div>
            <div class="block b68">
                <div class="block-outer">
                    <div class="block-inner">
                        <div class="bottom"></div>
                        <div class="front"></div>
                        <div class="left"></div>
                        <div class="right"></div>
                    </div>
                </div>
            </div>
            <div class="block b69">
                <div class="block-outer">
                    <div class="block-inner">
                        <div class="bottom"></div>
                        <div class="front"></div>
                        <div class="left"></div>
                        <div class="right"></div>
                    </div>
                </div>
            </div>
            <div class="block b70">
                <div class="block-outer">
                    <div class="block-inner">
                        <div class="bottom"></div>
                        <div class="front"></div>
                        <div class="left"></div>
                        <div class="right"></div>
                    </div>
                </div>
            </div>
            <div class="block b71">
                <div class="block-outer">
                    <div class="block-inner">
                        <div class="bottom"></div>
                        <div class="front"></div>
                        <div class="left"></div>
                        <div class="right"></div>
                    </div>
                </div>
            </div>
            <div class="block b72">
                <div class="block-outer">
                    <div class="block-inner">
                        <div class="bottom"></div>
                        <div class="front"></div>
                        <div class="left"></div>
                        <div class="right"></div>
                    </div>
                </div>
            </div>
            <div class="block b73">
                <div class="block-outer">
                    <div class="block-inner">
                        <div class="bottom"></div>
                        <div class="front"></div>
                        <div class="left"></div>
                        <div class="right"></div>
                    </div>
                </div>
            </div>
            <div class="block b74">
                <div class="block-outer">
                    <div class="block-inner">
                        <div class="bottom"></div>
                        <div class="front"></div>
                        <div class="left"></div>
                        <div class="right"></div>
                    </div>
                </div>
            </div>
            <div class="block b75">
                <div class="block-outer">
                    <div class="block-inner">
                        <div class="bottom"></div>
                        <div class="front"></div>
                        <div class="left"></div>
                        <div class="right"></div>
                    </div>
                </div>
            </div>
            <div class="block b76">
                <div class="block-outer">
                    <div class="block-inner">
                        <div class="bottom"></div>
                        <div class="front"></div>
                        <div class="left"></div>
                        <div class="right"></div>
                    </div>
                </div>
            </div>
            <div class="block b77">
                <div class="block-outer">
                    <div class="block-inner">
                        <div class="bottom"></div>
                        <div class="front"></div>
                        <div class="left"></div>
                        <div class="right"></div>
                    </div>
                </div>
            </div>
            <div class="block b78">
                <div class="block-outer">
                    <div class="block-inner">
                        <div class="bottom"></div>
                        <div class="front"></div>
                        <div class="left"></div>
                        <div class="right"></div>
                    </div>
                </div>
            </div>
            <div class="block b79">
                <div class="block-outer">
                    <div class="block-inner">
                        <div class="bottom"></div>
                        <div class="front"></div>
                        <div class="left"></div>
                        <div class="right"></div>
                    </div>
                </div>
            </div>
            <div class="block b80">
                <div class="block-outer">
                    <div class="block-inner">
                        <div class="bottom"></div>
                        <div class="front"></div>
                        <div class="left"></div>
                        <div class="right"></div>
                    </div>
                </div>
            </div>
            <div class="block b81">
                <div class="block-outer">
                    <div class="block-inner">
                        <div class="bottom"></div>
                        <div class="front"></div>
                        <div class="left"></div>
                        <div class="right"></div>
                    </div>
                </div>
            </div>
            <div class="block b82">
                <div class="block-outer">
                    <div class="block-inner">
                        <div class="bottom"></div>
                        <div class="front"></div>
                        <div class="left"></div>
                        <div class="right"></div>
                    </div>
                </div>
            </div>
            <div class="block b83">
                <div class="block-outer">
                    <div class="block-inner">
                        <div class="bottom"></div>
                        <div class="front"></div>
                        <div class="left"></div>
                        <div class="right"></div>
                    </div>
                </div>
            </div>
            <div class="block b84">
                <div class="block-outer">
                    <div class="block-inner">
                        <div class="bottom"></div>
                        <div class="front"></div>
                        <div class="left"></div>
                        <div class="right"></div>
                    </div>
                </div>
            </div>
            <div class="block b85">
                <div class="block-outer">
                    <div class="block-inner">
                        <div class="bottom"></div>
                        <div class="front"></div>
                        <div class="left"></div>
                        <div class="right"></div>
                    </div>
                </div>
            </div>
            <div class="block b86">
                <div class="block-outer">
                    <div class="block-inner">
                        <div class="bottom"></div>
                        <div class="front"></div>
                        <div class="left"></div>
                        <div class="right"></div>
                    </div>
                </div>
            </div>
            <div class="block b87">
                <div class="block-outer">
                    <div class="block-inner">
                        <div class="bottom"></div>
                        <div class="front"></div>
                        <div class="left"></div>
                        <div class="right"></div>
                    </div>
                </div>
            </div>
            <div class="block b88">
                <div class="block-outer">
                    <div class="block-inner">
                        <div class="bottom"></div>
                        <div class="front"></div>
                        <div class="left"></div>
                        <div class="right"></div>
                    </div>
                </div>
            </div>
            <div class="block b89">
                <div class="block-outer">
                    <div class="block-inner">
                        <div class="bottom"></div>
                        <div class="front"></div>
                        <div class="left"></div>
                        <div class="right"></div>
                    </div>
                </div>
            </div>
            <div class="block b90">
                <div class="block-outer">
                    <div class="block-inner">
                        <div class="bottom"></div>
                        <div class="front"></div>
                        <div class="left"></div>
                        <div class="right"></div>
                    </div>
                </div>
            </div>
            <div class="block b91">
                <div class="block-outer">
                    <div class="block-inner">
                        <div class="bottom"></div>
                        <div class="front"></div>
                        <div class="left"></div>
                        <div class="right"></div>
                    </div>
                </div>
            </div>
            <div class="block b92">
                <div class="block-outer">
                    <div class="block-inner">
                        <div class="bottom"></div>
                        <div class="front"></div>
                        <div class="left"></div>
                        <div class="right"></div>
                    </div>
                </div>
            </div>
            <div class="block b93">
                <div class="block-outer">
                    <div class="block-inner">
                        <div class="bottom"></div>
                        <div class="front"></div>
                        <div class="left"></div>
                        <div class="right"></div>
                    </div>
                </div>
            </div>
            <div class="block b94">
                <div class="block-outer">
                    <div class="block-inner">
                        <div class="bottom"></div>
                        <div class="front"></div>
                        <div class="left"></div>
                        <div class="right"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="js" setup>
import { onMounted } from 'vue'

const update = () => {
    let time = new Date(),
        hr = time.getHours(),
        min = time.getMinutes(),
        sec = time.getSeconds();

    // prepend 0s to single digits
    if (hr < 10)
        hr = "0" + hr;
    if (min < 10)
        min = "0" + min;
    if (sec < 10)
        sec = "0" + sec;

    let timeStr = `${hr}${min}${sec}`,
        digits = document.querySelectorAll(".digit"),
        digitArr = [];

    for (let d in digits) {
        d = +d;
        if (d < digits.length) {
            digitArr[d] = timeStr.substr(d, 1);
            digits[d].className = "digit _" + digitArr[d];
        }
    }
    setTimeout(update, 1000);
}
onMounted(() => {
    update();
});
</script>

<style scoped>
@import './a.css';
@import './b.css';
</style>